<script setup lang="ts">
import Law from "@/components/Law/Law";
import FullPage from "@/components/Layout/FullPage.vue";
import { useTabs } from "@/store/tab";
import dayjs from "dayjs";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";

const tabStore = useTabs();
const { list } = storeToRefs(tabStore);
const { getTabList, changeTab } = useTabs();

interface HomeInfo {
  head_bar: Array<string>;
  news_list: Array<{
    pic: Array<string>;
    title: string;
    location: string;
    created_at: string;
    page_view_num: number;
    news_id: string;
  }>;
}
const homeInfo = ref<HomeInfo>({
  head_bar: [],
  news_list: []
});
const current = ref(0);

const formatTime = (time: string) => dayjs(time).format("YYYY-MM-DD");

onMounted(() => {
  getTabList();
});

const onClick = (index: number) => {
  const id = index === 0 ? 2 : 8;
  const tab = list.value.find(item => item.id === id);
  if (tab) {
    changeTab(tab.id);
  }
};

const toDetail = (item: any) => {
  uni.navigateTo({ url: `/pages/article/article?news_id=${item.news_id}` });
};
</script>

<template>
  <FullPage class="home-page" :show-header="false" :show-footer="false">
    <view class="body">
      <!-- 轮播 -->
      <uv-swiper
        class="swiper"
        :list="homeInfo.head_bar"
        @change="e => (current = e.current)"
        @click="onClick"
      >
        <template v-slot:indicator>
          <view class="indicator">
            <view
              class="indicator__dot"
              v-for="(item, index) in homeInfo.head_bar"
              :key="index"
              :class="[index === current && 'indicator__dot--active']"
            ></view>
          </view>
        </template>
      </uv-swiper>
      <!-- 文章 -->
      <view
        class="article"
        v-for="(item, index) in homeInfo.news_list"
        :key="index"
        @click="toDetail(item)"
      >
        <view class="title">{{ item.title }}</view>
        <Flex justify="space-around">
          <image
            class="img"
            mode="widthFix"
            v-for="(pic, index) in item.pic"
            :key="index"
            :src="pic"
          />
        </Flex>
        <Flex justify="space-between" class="text">
          <text>{{ item.location }}{{ formatTime(item.created_at) }}</text>
          <text>浏览量{{ item.page_view_num }}</text>
        </Flex>
      </view>
      <Law :list="list" @select="changeTab"></Law>
    </view>
  </FullPage>
</template>

<style lang="scss" scoped>
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}
.swiper {
  margin-bottom: 20px;
}
.indicator {
  @include flex(row);
  justify-content: center;
  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 2px;
    transition: background-color 0.3s;
    &--active {
      background-color: #ffffff;
      width: 12px;
    }
  }
}
.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;
  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
.article {
  margin-bottom: 20px;
  .title {
    color: #19191c;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: justify;
  }
  .text {
    color: #a0a3b5;
    font-size: 12px;
    margin-top: 8px;
  }
  .img {
    flex: 1;
    &:not(:last-child) {
      margin-right: 4px;
    }
  }
}
.home-page {
  overflow-y: scroll;
  padding: 32rpx 0;
}
</style>
